<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form divClass" v-show="headerShow" style="padding-top: 15px">
        <a-form size="small" :model="query" layout="inline">
          <a-form-item label="日期" prop="beginDate">
            <a-date-picker popup-container="html" v-model="query.beginDate" :style="{ width: '180px' }"
                           placeholder="选择开始日期"
                           class="bacClass"/>
            至
            <a-date-picker popup-container="html" v-model="query.beginDate2" :style="{ width: '180px' }"
                           placeholder="选择结束日期"
                           class="bacClass"/>
          </a-form-item>
          <CorporateSectorCascader :configCascader="configCascader" @changeCascader="changeCascader"/>
          <a-form-item label="仓库类型" prop="beginDate">
            <a-select popup-container="html" @change="whChanges" @click="whTypeClick" class="bacClass"
                      :style="{ width: '10rem' }" v-model="query.beginDate4" allow-clear>
              <a-option v-for="item in whTypeList">
                {{ item.typeName }}
              </a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="仓库名称" prop="beginDate">
            <a-select popup-container="html" class="bacClass" :style="{ width: '10rem' }" v-model="query.beginDate5"
                      allow-clear>
              <a-option v-for="item in WhList">
                {{ item.warehouseName }}
              </a-option>
            </a-select>
          </a-form-item>
          <a-form-item label="状态" prop="beginDate">
            <a-select popup-container="html" class="bacClass" :style="{ width: '10rem' }" v-model="query.beginDate6"
                      allow-clear>
              <a-option :value="'OUTSTOCK'">出库</a-option>
              <a-option :value="'INSTOCK'">入库</a-option>
              <a-option :value="null">全部</a-option>
            </a-select>
          </a-form-item>
        </a-form>
        <div class="my-tool-bar" style="margin-bottom: 5px">
          <a-space>
            <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
          </a-space>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18"/>
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18"/>
        </a-divider>
      </div>
    </template>
    <template #pageTabel>
      <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" rowSelection="multiple"
                       @grid-ready="gridReady"
                       style="height: calc(100% - 45px)" :defaultColDef="defaultColDef" class='ag-theme-alpine'
                       :rowData="tableDataList"
                       :columnDefs="tc" :localeText="localeText1">
      </AgGridVuesCopys>
      <paginationCopys :page-size-options="pagingList1" :total="fySelet.total" show-total show-jumper show-page-size
                       @change="PageSize" @page-size-change="change" style="justify-content: center"
                       :page-size="fySelet.size"
                       :current="fySelet.page"/>
    </template>
  </pageTabelLayout>
</template>

<script lang="ts" setup>


import {Message} from '@arco-design/web-vue'
import {ref, reactive, onMounted, watch} from 'vue'
// 引入element提示
//引入封装post
import {post} from '@/api/http'
import {Search, EditPen} from '@element-plus/icons-vue'
import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
import WHService from "@/service/wh"
import dayjs from 'dayjs'
import {localeText} from '@/api/aggridZw'
import {pagingList} from '@/api/paging'

const pagingList1: any = ref(pagingList)
const headerShow = ref<boolean>(true)
const localeText1: any = ref(localeText)
const configCascader = ref<{}>({
  corporateWidth: '180px', //公司宽度
  sectorWidth: '180px', //部门宽度
  corporateRquired: false, //公司是否必填
  sectorRquired: false, //部门是否必填
  size: 'mini', //选择框大小'mini' | 'small' | 'medium' | 'large'
  corporateName: '选择公司', //公司label
  sectorName: '选择部门', //部门label
  cascaderShow: 'sector', //配置部门不显示
})
const whService = new WHService()
const WhList: any = whService.whList
const changeCascader = (data: any) => {
  const {corporateId, sectorId, sectorLabel, corporateLabel} = data
  query.beginDate3 = corporateId
}

const whChanges = (data: any) => {
  whService.getWarhouseListByFirmId(query.beginDate3, data)
}

interface Querin {
  beginDate: any
  beginDate2: string
  beginDate3: any
  beginDate4: any
  beginDate5: any
  beginDate6: any
}

//getlist初始化接口参数
let query = reactive<Querin>({
  beginDate: '',// dayjs().format('YYYY-MM-DD'), //当天日期
  beginDate2: '',// dayjs().format('YYYY-MM-DD'), //当天日期
  beginDate3: null,
  beginDate4: '',
  beginDate5: '',
  beginDate6: null
})

const fySelet: any = reactive({
  total: 10,
  size: 10,
  page: 1,
})

const PageSize = (val: any) => {
  fySelet.page = val
  selectJt()
}

const change = (val: any) => {
  fySelet.size = val
  selectJt()
}

const tableDataList: any = ref([])
const gridOption = ref()
const gridReady = (params: any) => {
  gridOption.value = params.api
}
const defaultColDef = {
  sortable: true,
  resizable: true,
  filter: true,
}

const tc = [
  {
    headerName: '公司',
    field: 'firm',
    width: 150
  },
  {
    headerName: '仓库类型',
    field: 'warehouseTypeName',
    width: 150
  },
  {
    headerName: '仓库名称',
    field: 'warehouseName',
    width: 150
  },
  {
    headerName: '单号',
    field: 'orderNo',//
    width: 150
  },
  {
    headerName: '操作类型',
    field: 'operationType',//
    width: 150
  },
  {
    headerName: '物品编号',
    field: 'goodesCode',//
    width: 150
  },
  {
    headerName: '物品名称',
    field: 'goodsName',//
    width: 150
  },
  {
    headerName: '数量',
    field: 'num',
    width: 150
  },
  {
    headerName: '单位',
    field: 'unit',
    width: 150
  },
  {
    headerName: '操作内容',
    field: 'content',
    width: 150
  },
  {
    headerName: '操作人',
    field: 'createName',
    width: 150
  },
  {
    headerName: '操作时间',
    field: 'createTime',
    width: 150
  },
]


function selectJt() {
  post({
    url: 'dwWms/stockLog/getStockLogPage',
    data: {
      beginTime: query.beginDate,
      endTime: query.beginDate2,
      firmId: query.beginDate3,
      warehouseTypeName: query.beginDate4,
      warehouseName: query.beginDate5,
      type: query.beginDate6,
      page: fySelet.page,
      size: fySelet.size,
    }
  }).then((res: any) => {
    if (res.code == 200) {
      tableDataList.value = res.data.list
      fySelet.total = res.data.total
    } else {
      Message.error(res.message)
    }
  })
}


const getList = () => {
  selectJt()
}
const whTypeList: any = ref([])
const whTypeClick = () => {
  post({
    url: "dwWms/warehouseType/getFieldValue",
    data: {
      typeName: ''
    }
  }).then(({data, code}: any) => {
    if (code === 200) {
      whTypeList.value = data;
    } else {
      Message.error({
        content: "查询失败！",
        duration: 5000,
      });
    }
  });
}
</script>
<style scoped>
.contioner {
  height: 100%;
  background: #fff;
}

:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}
</style>
      